<template>
    <el-dialog class="attr-dialog" v-model="dailogStatus" title="属性选择">
        <div class="form-fr form-attribute">
            <h3 class="box-title">基础属性</h3>
            <div class="check-content">
                <el-checkbox-group v-model="selectList">
                    <div class="item" v-for="(item, index) in componentAttr.basicAttr" :key="index">
                        <el-checkbox :label="item.key">{{ item.label }}({{ item.key }}-{{ item.replaceKey }})</el-checkbox>
                        <el-icon title="编辑" :size="icon.size" :color="icon.color" @click="editAttr(item)"><Edit /></el-icon>
                    </div>
                </el-checkbox-group>
            </div>
        </div>
        <div class="form-fr form-attribute">
            <h3 class="box-title">布尔属性</h3>
            <div class="check-content">
                <el-checkbox-group v-model="selectList">
                    <div class="item" v-for="(item, index) in componentAttr.booleanAttr" :key="index">
                        <el-checkbox :label="item.key"> {{ item.label }}({{ item.key }}-{{ item.replaceKey }})</el-checkbox>
                        <el-icon title="编辑" :size="icon.size" :color="icon.color" @click="editAttr(item)"><Edit /></el-icon>
                    </div>
                </el-checkbox-group>
            </div>
        </div>
        <div class="form-fr form-attribute">
            <h3 class="box-title">选择属性</h3>
            <div class="check-content">
                <el-checkbox-group v-model="selectList">
                    <div class="item" v-for="(item, index) in componentAttr.selectAttr" :key="index">
                        <el-checkbox :label="item.key"> {{ item.label }}({{ item.key }}-{{ item.replaceKey }})</el-checkbox>
                        <el-icon title="编辑" :size="icon.size" :color="icon.color" @click="editAttr(item)"><Edit /></el-icon>
                    </div>
                </el-checkbox-group>
            </div>
        </div>
        <div class="form-fr form-attribute">
            <h3 class="box-title">额外属性</h3>
            <div class="check-content">
                <el-checkbox-group v-model="selectList">
                    <div class="item" v-for="(item, index) in componentAttr.ruleAttr" :key="index">
                        <el-checkbox :label="item.key"> {{ item.label }}({{ item.key }}-{{ item.replaceKey }})</el-checkbox>
                        <el-icon title="编辑" :size="icon.size" :color="icon.color" @click="editAttr(item)"><Edit /></el-icon>
                    </div>
                </el-checkbox-group>
            </div>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="close" size="small">取消</el-button>
                <el-button type="primary" @click="confirm" size="small">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
    import { ref } from 'vue'
    export default {
        props: {
            dialogFormVisible: {
                type: Boolean,
                default: false
            },
            defaultVal: {
                type: Array,
                default: function() {
                    return []
                }
            },
            componentAttr: {
                type: Array,
                default: function() {
                    return []
                }
            },
        },
        emits: ['update:dialogFormVisible'],
        setup(props, context) {
            let dailogStatus = ref(false) // 弹窗状态
            let selectList = ref([]) // 多选框组选择结果
            const icon = ref({
                size: 16,
                color: '#55aaff'
            })
            // 编辑属性
            function editAttr(item) {
                console.log(item)
                context.emit('edit', item)
            }
            // 关闭
            function close() {
                dailogStatus.value = false
            }
            // 弹窗确认
            function confirm() {
                console.log('context', context)
                context.emit('change', selectList.value)
                close()
            }
            return {
                dailogStatus,
                selectList,
                editAttr,
                icon,
                confirm
            }
        },
        watch: {
            dialogFormVisible: {
                handler(v) {
                    this.dailogStatus = v
                }
            },
            dailogStatus: {
                handler(v) {
                    this.$emit('update:dialogFormVisible', v)
                }
            },
            defaultVal: {
                handler(v) {
                    this.selectList = JSON.parse(JSON.stringify(v))
                },
                deep: true
            }
        },
    }
</script>

<style scoped lang="less">
    .attr-dialog {
        /deep/.el-checkbox {
            margin-right: 0;
        }
    }
    .item {
        display: inline-block;
        margin-right: 30px;
        /deep/.el-icon {
            margin-left: 5px;
            cursor: pointer;
        }
    }
</style>
